@font-face {
  font-family: 'icons';
  src: url('/font/icons.eot?83223639');
  src: url('/font/icons.eot?83223639#iefix') format('embedded-opentype'),
	   url('/font/icons.woff?83223639') format('woff'),
	   url('/font/icons.ttf?83223639') format('truetype'),
	   url('/font/icons.svg?83223639#icons') format('svg');
  font-weight: normal;
  font-style: normal;
}

body {
	margin: 0;
	font-family: Arial, sans-serif;
	display: flex;
	height: 100vh;
	overflow:hidden;
}

a{
	cursor: pointer;
}
.sidebar {
	width: 80px;
	background-color: #2A2E35;
	color: #ffffff;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overflow-x:hidden;
}
.chat {
	flex: 1;
	display: flex;
	flex-direction: column;
	background-color: #2980B9;
}
.sidebar-header {
	padding: 15px;
	background-color: #23272A;
	font-size: 18px;
	font-weight: bold;
	width: 80px;
	overflow:hidden;
	height:80px;
	display:none;
}
.contact {
	display: flex;
	align-items: center;
	padding: 10px 15px;
	cursor: pointer;
	border-bottom: 1px solid #444;
	min-height:30px;
}

.pinned {
	background-color:rgba(255,255,255,0.05);
}

.contact:hover {
	background-color: #3A3F42;
}
.contact img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	margin-right: 10px;
	margin-left: -5px;
}
.contact-details {
	display:none;
}
.contact-name {
	display:none;
}
.contact-last-message {
	display:none;
}
.chat-header {
	padding: 5px;
	background-color: black;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.pinned-message {
	padding: 5px;
	background-color: white;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height:40px;
}

.chat-header img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	margin-right: 10px;
	valign: top;
	vertical-align:middle;
}
.chat-header .burgermenu {
	cursor: pointer;
	margin-right:10px;
	position:relative;
}

.burgermenu .menu{
	display:none;
}

.burgermenu:hover .menu{
	display:block;
	background-color:white;
	width:170px;
	position:absolute;
	left:-140px;
	top:1px;
	padding:0;
	margin:0;
	overflow:hidden;
}

.menu ul{
	margin:0;
	padding:0;
	}

.menu li{
	text-decoration:none;
	display:block;
	color:black;
	margin:0;
	width:170px;
	padding:0;
	line-height:2em;
	padding-left:10px;
}

.menu li:hover{
	display:block;
	color:white;
	background-color:black;
}

.attachment{
	display:flex;
	height:35px;
	background-color: #0078D7;
	padding:10px;
	line-height:30px;
	border-radius:10px;
	color:white;
	margin-bottom:5px;
	overflow:hidden;
	cursor: pointer;
	transition:1s;
}

.attachment:hover{
	background-color: #209bff;
}

.attachment_icon{
	flex: 1;
	background-color: #58b2f8;
	border-radius:45px;
	width:30px;
	height:30px;
	vertical-align:middle;
	margin-right:10px;
}

.downloadarrow{
	position:absolute; 
	left:15px; 
	bottom:15px; 
	cursor:pointer; 
	background-color:rgba(0,0,0,0.5); 
	color:white; 
	font-weight:bold; 
	border:2px solid white; 
	display:block; 
	width:30px; 
	height:30px; 
	line-height:30px; 
	text-align:center; 
	border-radius:45px;
	transition: 1s;
}

.downloadarrow:hover{
	background-color:rgba(255,255,255,1); 
	color:black;
	border:2px solid black;
}

.messages {
	flex: 1;
	padding: 15px;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	background-color:#2980B9;
}
.message {
	margin-bottom: 10px;
}
.message.sent {
	text-align: right;
}
.message .bubble {
	display: inline-block;
	padding: 10px;
	border-radius: 8px;
	max-width: 400px;
	word-wrap: break-word;
}

.bubble{
	box-shadow:1px 1px 5px rgba(0,0,0,0.2);
}

.message.sent .bubble {
	background-color: #DCF8C6;
}
.message.received .bubble {
	background-color: #fff;
}

.highlighted {
	background-color: #ff8 !important;
	border:1px solid darkorange;
}

.bubble a{
	text-decoration:none;
	color:navy;
}

.bubble a:hover{
	text-decoration:underline;
	color:navy;
}

.controls{
	visibility:hidden;
	font-family:"icons";
}

.bubble:hover .controls{
	visibility:visible;
}

.controls a{
	text-decoration:none !important;
	font-size:20px !important;
}

.controls a:hover{
	color:red !important;
}

.message .subtext {
	font-size: 10px;
	color: #666;
	margin-top: 20px;
	float:right;
	clear:both;
}

.subtext-image {
	font-size: 10px;
	color: #666;
	margin-top: 20px;
}

.message .image-message {
	max-width: 200px;
	max-height: 200px;
}
.message .link-preview {
	display: flex;
	flex-direction: column;
	border: 1px solid #ccc;
	border-radius: 5px;
	overflow: hidden;
	max-width: 400px; /* Limit the width to 300px */
}
.message .link-preview img {
	max-width: 100%;
}
.message .link-preview .link-details {
	padding: 5px;
	background-color: #f7f7f7;
}
.message .link-preview .link-title {
	font-weight: bold;
}
.message .link-preview .link-url {
	font-size: 12px;
	color: #666;
}

.link:before{
	font-family:"icons";
	content:' ';
}

.chat-input {
	padding: 10px;
	background-color: #f7f7f7;
	display: flex;
	gap: 10px;
	position:relative;
}
.chat-input input, .chat-input textarea {
	flex: 1;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
}

.flash-red {
    background-color: #ff5555 !important;
    transition: background-color 0.5s ease;
}

.chat-input button {
	padding: 10px;
	border: 1px solid white;
	background-color: #0078D7;
	color: #fff;
	border-radius: 5px;
	cursor: pointer;
}

.button {
	padding: 10px;
	border: none;
	background-color: #0078D7;
	color: #fff;
	border-radius: 5px;
	cursor: pointer;
	transition:1s;
}

.button:hover {
	background-color: #209bff;
}

.formInput{
	color: #0078D7; 
	width:80%; 
	height:30px; 
	text-align:center; 
	font-size:20px; 
	border:0px; 
	border-right:1px solid black;
	border-bottom:1px solid black;
}

.chat-input button:hover {
	background-color: #005BB5;
}
.imagemodal{
	position:fixed;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
	display: flex;
    justify-content: center; /* Horizontally center */
    align-items: center;    /* Vertically center */
    height: 100vh; 
	background-color:rgba(0,0,0,0.5);
}
.imagemodal img{
	max-height:90%;
	max-width:90%;
	width:auto !important;
	text-align: center;
}

.closemodal{
	background-color:rgba(255,255,255,0.5);
	color:white;
	padding:5px;
	cursor: pointer;
	display:block;
	display:none;
}

#loader{
	visibility:hidden;
	width:0px;
	height:0px;
	border:0px;		
}

.sidebar-header a{
	display:inline-block;
	padding:2px;
	border:1px solid #444;
	height:20px;
	line-height:20px;
	width:20px;
	text-align:center;
	border-radius:10px;
}

.pinned-message{
	cursor: pointer;
}